<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Success</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<h1 style="color: limegreen">Success</h1>
<div>
    <h1>${success}</h1>
    <table id="dataTable" border="1">
        <thead>
        <tr>
            <th>主键ID</th>
            <th>作者</th>
            <th>标题</th>
            <th>出版者</th>
            <th>类型</th>
            <th>出版时间</th>
        </tr>
        </thead>
        <tbody>
        <#list listBook as item>
            <tr>
                <td>${item.id}</td>
                <td>${item.author}</td>
                <td>${item.title}</td>
                <td>${item.publisher}</td>
                <td>${item.genre}</td>
                <td>${item.createTime?string("yyyy-MM-dd hh:mm:ss")}</td>
            </tr>
        </#list>
        </tbody>
    </table>
</div>
<hr/>
<input type="text" id="bookId" placeholder="书籍ID" />
<button type="submit" >查看</button>
<hr>
<div id="act"></div>
</body>
<script>
    $('button').click(function () {
        var bookId= $("#bookId").val();
        $.ajax({
            type:"get",
            dataType:"text",
            url:"/queryById",
            data:{bookId:bookId},
            success:function (data) {
                var obj = JSON.parse(data);
                console.log('obj----------', obj)
                $("#act").append(obj.author);
                $("#dataTable").empty();
                $("#dataTable").append(obj);
            }
        })
    })
</script>
</html>